class ElementClass {
  /**
   * 创建dom的方法
   * elObj  (Object) 要被渲染的dom结构
   * appEl  (DOM)  生成好放入到的父元素节点
   *
   * */
  static createEl = function (elObj, appEl) {
    elObj = {
      ...{},
      ...elObj,
    };
    // 去除特殊属性 不用加给dom
    let removeArr = ["el", "style", "elChildren"];
    let elObjEl = document.createElement(elObj.el);
    // 设置基础属性
    for (let k in elObj) {
      if (removeArr.includes(k)) continue;
      elObjEl[k] = elObj[k];
    }
    // 给样式
    for (let key in elObj.style) {
      elObjEl.style[key] = elObj.style[key];
    }
    // 创建子元素
    elObj.elChildren &&
      elObj.elChildren.forEach((item) => {
        // 递归 丢给父dom
        elObjEl.appendChild(createEl(item));
      });
    if (appEl) appEl.appendChild(elObjEl);
    return elObjEl;
  };
}

// 使用说明
// let domObj = {
//   el: "div",
//   className: "xxx",
//   backgroundColor: "pink",
//   elChildren: [
//     // 一定得是数组
//     {
//       /* ... 跟外面一样*/
//     },
//   ],
// };
// ElementClass.createEl(domObj, document.getElementById("app"));
